<template>
	<div class="home">
	<div style="display: flex;margin-bottom: 40px;margin-top: 40px;">
	</div>
	<div>
	<div class="medical-case">
	<div style="width: 1200px;margin: auto;padding: 60px 0;">
	<h2>医学优秀案例展示</h2>
	<p style="padding: 15px 0;color: #929292;">Medical Excellence Case Demonstration</p>
	<p style="line-height: 40px;padding: 20px 10px;">
	展示一系列具有创新性和显著成效的vue3课堂案例，涵盖多种领域。
	这些案例展示了大家的代码技术、丰富的想象力以及专业知识，为学生提供了宝贵的借鉴经验。
	通过分享这些优秀案例，推动Vue3的传播与交流，促进整体提升。
	</p>
	<div style="padding-bottom: 10px;" @click='GoDetails(v)' v-for="(v,i) in list" :key='i'>
	<img style="width: 400px;cursor: pointer;" :src="v.img" alt="">
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>
	<script setup>
	import caseImg1 from '@/assets/case1.jpg'
	import caseImg2 from '@/assets/case2.jpg'
	import caseImg3 from '@/assets/case3.jpg'
	import {
	ElMessage,
	ElMessageBox
	} from 'element-plus'
	import {
	reactive,
	onMounted
	} from 'vue'
	import {
	useRouter
	} from 'vue-router'
	const router = useRouter()
	let list = [
	{
	img: caseImg1
	},
	{
	img: caseImg2
	},
	{
	img: caseImg3
	}
	]
	onMounted(() => {})
	// 跳转
	let Go = (url) => {
	router.push(url)
	}
	// 跳转到详情页面
	let GoDetails = (v) => {
	router.push({
	path: '/Details',
	query: v
	})
	}
	</script>
	<style scoped>
	/deep/.el-carousel__container {
	height: 550px;
	}
	.el-carousel__item {
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	/* color: #475669;
	font-size: 18px;
	opacity: 0.75;
	line-height: 300px;
	margin: 0; */
	}
	.el-carousel__item:nth-child(2n) {
	background-color: #99a9bf;
	}
	.el-carousel__item:nth-child(2n + 1) {
	background-color: #d3dce6;
	}
	.medical-case {
	background: #f1f1f1;
	min-height: 500px;
	margin-top: 30px;
	border-radius: 2px;
	text-align: center;
	}
	</style>